<template>
  <div class="content" style="background: #fff;padding: 30px;" :bordered="false">
    <div class="table-operator">
      <a-button type="primary" icon="add" @click="addForm()">发起提现</a-button>
    </div>
    <a-table
      :columns="withdrawColumns"
      :dataSource="data"
      rowKey="id"
      :pagination="pagination"
    >
      <span slot="freightTemplateDO.deliveryDeadline" slot-scope="text">{{ text }}天</span>
      <span slot="freightTemplateDO.defaultFreePrice" slot-scope="text">
        <span v-if="text === 0">包邮</span>
        <span v-if="text > 0">满{{ text / 100.0 }}元包邮</span>
        <span v-if="text < 0">不包邮</span>
      </span>
      <span slot="freightTemplateDO.defaultFirstNum" slot-scope="text">{{ text }}件</span>
      <span slot="freightTemplateDO.defaultFirstMoney" slot-scope="text">{{ text / 100.0 }}元</span>
      <span slot="freightTemplateDO.defaultContinueNum" slot-scope="text">{{ text }}件</span>
      <span slot="freightTemplateDO.defaultContinueMoney" slot-scope="text">{{ text / 100.0 }}元</span>
      
      
      <span slot="use" slot-scope="text, record" class="">
        <a-button type="primary"  class="flyray-btn"
        @click="edit(record)"
       >修改</a-button>

        <a-button type="danger"
        class="table-danger flyray-btn" @click="deleteRow(record)"
        >删除</a-button>
      </span>
    </a-table>
    <a-modal
      title="提现"
      v-model="visible"
      wrapClassName="mymodel"
      :footer="null"
      destroyOnClose
      width="50%"
    >
      <a-form @submit="handleSubmit" :form="form">

        <a-form-item
          label="用户编号"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
        >
          <a-input v-model="form.userId"
            allowClear
            name="userId"
            autocomplete="off"
          />
        </a-form-item>

        <a-form-item
          label="提现账户编号"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
        >
          <a-select @change="selectchange">
            <a-select-option :value="item.accountNo" v-for="(item, index) in acccountData"
              :key="index">{{item.accountNo}}
            </a-select-option>
          </a-select>

        </a-form-item>

        <a-form-item
          label="申请提现金额"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
        >
          <a-input v-model="form.applyAmount"
            allowClear
            name="applyAmount"
            autocomplete="off"
          />
        </a-form-item>
        
        <div class="mybutton">
          <a-button class="cancelMymodel" @click="visible = false">取消</a-button>
          <a-button html-type="submit" type="primary">确定</a-button>
        </div>

      </a-form>
    </a-modal>

    <a-modal
      title="编辑"
      v-model="visible2"
      :footer="null"
      destroyOnClose
      width="50%"
      wrapClassName="mymodel"
    >
      <a-form @submit="handleSubmitEdit" :form="formEdit">
        <a-form-item
          label="模板名称"
          :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
         
        </a-form-item>
      </a-form>
      <div class="mybutton">
        <a-button class="cancelMymodel" @click="visible2 = false">取消</a-button>
        <a-button html-type="submit" type="primary">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>

import { withdrawColumns } from '@/const/crud/mall/withdraw.config'
import { getAccountList } from '@/api/mall/account'
import { withdrawApply, getWithdrawList } from '@/api/mall/finance'

export default {
  name: 'freightFormwork',
  data() {
    return {
      form: {
        'userId': '1001',
        'accountNo': '',
        'applyAmount': ''
      },
      queryForm: {
        'userId': '1001',
        'status': ''
      },
      formEdit: this.$form.createForm(this),
      withdrawColumns,
      pagination: {
        total: 0,
        pageSize: 10,
        showSizeChanger: true,
        showTotal: total => `共有${total}条`
      },
      value: 1,
      addDatas: [],
      data: [],
      visible: false,
      visible2: false,
      acccountData: [],
      userId: 1001,
    }
  },
  created() {
    this.getWithdrawData()
  },
  methods: {
    // 获取提现账户信息
    getwithdrawAccount(){
      getAccountList(this.userId).then(res => {
        console.log(res)
        this.acccountData = res.data
      })
    },
    selectchange(value){
          this.form.accountNo =value
      },
    addForm() {
      this.visible = true
      this.addDatas = []
      this.getwithdrawAccount()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.visible = false
      withdrawApply(this.form).then(res => {
        
      })
    },
    getWithdrawData() {
      getWithdrawList(this.queryForm).then(res => {
        this.data = res.data.items
        this.loading = false
        this.pagination.total = res.data.total
      })
    },
    
    handleSubmitEdit(e) {
      
    },
    deleteRow(val) {
      // console.log(val)
      var _this = this
      this.$confirm({
        title: '提示',
        content: `此操作将永久删除该运费模板--- ${val} ---,是否继续?`,
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          let params = new FormData()
          params.append('_gp', 'admin.freight')
          params.append(' _mt', 'deleteFreightTemplate')
          params.append('templateId', val.freightTemplateDO.id)
          _this.axios
            .post('http://admin.huajianmo.com/api/m.api', params, {
              headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            })
            .then(res => {
              if (res.errno === 200) {
                _this.$notification.success({
                  description: '删除模板成功',
                  message: '成功'
                })
                _this.getfreightLists()
              } else {
                _this.$notification.error({
                  description: res.errmsg,
                  message: '失败'
                })
                _this.$message.error(res.errmsg + '  异常代码 : ' + res.errno)
              }
            })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.flyray-btn{
  font-size:12px;padding:0 7px;margin:0 0 0 3px;height:24px;
}
.table-danger,
.table-danger:focus {
  color: #fff;
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  margin-left: 5px;
}
.mymodel {
  .ant-modal {
    top: 0;
    padding: 0;
    .ant-modal-content {
      .ant-form-item-label {
        margin-right: 80px;
        label {
          font-weight: 700;
          color: #606366;
          width: 150px;
          &::after {
            content: '';
          }
        }
      }
      .ant-input {
        height: 36px;
      }
      .has-error .ant-form-explain {
        color: #f56c6c;
        font-size: 13px;
        line-height: 1;
        padding-top: 4px;
      }
      label.ant-radio-wrapper-checked {
        span {
          color: #1890ff;
        }
      }
    }
    .ant-modal-header {
      border-bottom: none;
      .ant-modal-title {
        font-size: 18px;
      }
    }
    .ant-modal-body {
      padding-bottom: 90px;
    }
    .ant-modal-footer {
      padding: 0 16px;
      border: none;
    }
    .add-table {
      thead {
        th {
          padding: 20px 0px;
          color: #909399;
          font-weight: 700;
          background-color: #fff;
          div {
            padding-left: 10px;
          }
        }
      }
      .ant-empty-normal {
        margin: 0;
        .ant-empty-image {
          display: none;
        }
      }
    }
    .mybutton {
      text-align: right;
      bottom: 30px;
      right: 0px;
      margin-top: 20px;
    }
    .cancelMymodel {
      margin-right: 10px;
    }
  }
}
.mymodel-two {
  z-index: 1001;
  .ant-modal {
    top: 30px;
    .ant-modal-content {
      height: 858px !important;
      .ant-form-item-label {
        margin-right: 30px;
      }
    }
  }
  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin-left: 0;
  }
  .ant-checkbox-wrapper {
    height: 42px;
    line-height: 42px;
    margin-right: 20px;
    user-select: none;
  }
}
.ant-modal-confirm {
  top: 35%;
}
</style>
